
//  this  指向 调用者


console.log(this) // 此处为 window

const sayHi = function (){
    console.log(this) // 普通函数指向调用者   此处为 window
}
sayHi()

const btn = document.querySelector('button')
btn.addEventListener('click',function(){
    console.log(this) // 当前 this  指向 btn
})


//  箭头函数的 this  指向和当前作用域 this 指向一样  他没有自己的 this  指向

let arr = () =>{
    console.log(this) //  此处为 window
}
arr()

//  箭头函数的 this  取决于当前箭头函数定义的位置，不看是谁调用的箭头函数

//  一般事件处理函数不要使用箭头函数，因为普通的function 更容易找到事件源
btn.addEventListener('click',()=> {
    console.log(this) // 当前 this  指向 windwo
})

// 如果非要使用
btn.addEventListener('click',()=> {
    btn.style.color = 'red'
})

// 函数里的定时器
btn.addEventListener('click',function(){
    this.style.color = 'red'
    
    setTimeout(function(){
        console.log(this) // this  指向 window  因为定时器 属于 window 对象，定时器的函数也由 window 触发
        this.style.color = 'red' // 所以会报错
    },2000)
})

btn.addEventListener('click',function(){
    this.style.color = 'red'
    
    //使用箭头函数 ，完美解决以上问题   箭头函数的this 永远指向 当前环境的 this
    setTimeout( () =>{
        this.style.color = 'red'
    },2000)

})

